<template>
	<div class="coupon">
		<div v-if="coupons && coupons.length>0">
			<div class="coupon-block" v-for="(item, index) in coupons" :key="index">
				<span class="price">￥<em>{{item.money}}</em></span>
				<div class="con">
					<p class="con-price">￥{{item.title}}</p>
					<p class="time">{{item.end_time | formatDate}}</p>
				</div>
			</div>
		</div>
		<div class="coupon-none" v-else>
			即刻参与活动赢取代金券前往 <span @click="router({path: 'activityCenter'})">活动中心 ></span>
		</div>
	</div>
</template>
<script type="text/javascript">	
	import { mycoupons } from '@/api/api'
	import { formatDate } from '@/util/date.js'
	export default {
		filters:{
	    formatDate(time){
	      let date = new Date(time*1000);
	      return formatDate(date,'yyyy.MM.dd');
	      //此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用
	    }
		},
	  components: {
	  },
	  data () {
	    return {
	    	coupons: [],
	    	uid: 1,
	    }
	  },
	  created () {
			this.mycouponsFn()
	  },
	  methods: {    
	    router (path) {
	      this.$router.push(path)
	    },
	    // 获取代金券
	    mycouponsFn (_index) {
	    	mycoupons(this.uid).then((res) => {
	    		this.coupons = res.data.info
	    		console.log(res)
	    	}).catch((err) => {
	    		console.log(err)
	    	})
	    },
	  }
	}
</script>
<style lang="stylus">
	.coupon
		width 100vw
		height 100vh
		background-color #f2f2f2
		overflow hidden
		.coupon-none		
			font-size 1.5rem
			width 16.875rem
			text-align center
			line-height 3rem
			position absolute
			top 50%
			margin-top -3rem
			left 50%
			margin-left -8.4325rem
			span
				color #FF659B
		.coupon-block
			background-image url('../../assets/querengdingdan2.png')
			background-size contain
			background-repeat no-repeat
			margin 1.5rem
			width 34.5rem
			height 8rem
			display flex
			.price
				flex 1
				max-width 9rem
				line-height 8rem
				padding-left 1rem
				color #FF659B
				font-weight bold
				font-size 1.8rem
				em
					font-size 4rem
			.con
				flex 1
				margin-left 3rem
				padding-top 1.9rem
				.con-price
					font-size 1.5rem
					color #333
					font-weight 500
				.time
					font-size 1.3rem
					color #999
</style>